<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>bootstrap-table - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="${ctx}/static/bootstrap/favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="${ctx}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="${ctx}/static/bootstrap/css/materialdesignicons.min.css" rel="stylesheet">
<link href="${ctx}/static/bootstrap/css/animate.css" rel="stylesheet">
<link href="${ctx}/static/bootstrap/css/style.min.css" rel="stylesheet">
<link href="${ctx}/static/bootstrap/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link href="${ctx}/static/bootstrap/js/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.min.css" rel="stylesheet">
<!--对话框-->
<link rel="stylesheet" href="${ctx}/static/bootstrap/js/jconfirm/jquery-confirm.min.css">
<link href="${ctx}/static/bootstrap/css/style.min.css" rel="stylesheet">
<!--通知消息-->
<link href="${ctx}/static/bootstrap/css/materialdesignicons.min.css" rel="stylesheet">
<link href="${ctx}/static/bootstrap/css/animate.css" rel="stylesheet">
<style type="text/css">
	label.error{color:red;}	
</style>
</head>

<body>
	<div class="container-fluid p-t-15">
		<div class="row">
			<div class="col-lg-12">
				<div class="card">
					<div class="card-header">
						<h4>查询教师信息</h4>
					</div>
					<div class="card-body" style="margin-bottom:0px;padding-bottom:0px;">
						<form class="form-inline" id="form-teacher-query">
							<div class="form-group">
								<label for="id" class="control-label">教师编号：</label> 
								<input class="form-control" type="text" id="id" name="id">
							</div>
							<div class="form-group">
								<button class="btn btn-success" id="btnQuery" type="button">查询</button>
								<button class="btn btn-danger" id="btnReset" type="button">重置</button>
							</div>
						</form>
					</div>
					<div class="card-body">
						<div id="toolbar" class="toolbar-btn-action">
						<button id="btn_add" type="button" class="btn btn-primary m-r-5" data-toggle="modal" data-target="#addModal" data-whatever="@mdo">
								<span class="mdi mdi-plus" aria-hidden="true"></span>新增
							</button>
							<button id="btn_delete" type="button" class="btn btn-danger" onclick="deleteByIds()">
								<span class="mdi mdi-window-close" aria-hidden="true"></span>删除
							</button>
						</div>
						<table id="myTable"></table>
						<!-- 新增模态框开始 -->
						<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
							<div class="modal-dialog" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
										<h4 class="modal-title" id="exampleModalLabel">新增老师</h4>
									</div>
									<div class="modal-body">
										<form id="form-teacher-add">
											<div class="form-group">
												<label for="teacherName" class="control-label">老师名称：</label> 
												<input type="text" class="form-control" id="teacherName" name="teacherName">
											</div>
											<div class="form-group">
												<label for="teacherSex" class="control-label">老师性别：</label>												
												<select class="form-control" id="teacherSex" name="teacherSex">
													<option value="0">女</option>
													<option value="1">男</option>
												</select>
											</div>
											<div class="form-group">
												<label for="teacherPhone" class="control-label">老师电话：</label> 
												<input type="text" class="form-control" id="teacherPhone" name="teacherPhone">
											</div>
										</form>
									</div>
									<div class="modal-footer">
										<button type="submit" id="btnSubmit" onclick="add()" class="btn btn-primary">提交</button>
										<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
									</div>
								</div>
							</div>
						</div>
						<!-- 新增模态框结束 -->
						<!-- 编辑模态框开始 -->
						<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
							<div class="modal-dialog" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
										<h4 class="modal-title" id="exampleModalLabel">修改老师信息</h4>
									</div>
									<div class="modal-body">
										<form id="form-teacher-edit">
											<input type="hidden" class="form-control" id="index" name="index">
											<input type="hidden" class="form-control" id="id" name="id">
											<div class="form-group">
												<label for="teacherName" class="control-label">老师名称：</label> 
												<input type="text" class="form-control" id="teacherName" name="teacherName">
											</div>
											<div class="form-group">
												<label for="teacherSex" class="control-label">老师性别：</label>												
												<select class="form-control" id="teacherSex" name="teacherSex">
													<option value="0">女</option>
													<option value="1">男</option>
												</select>
											</div>
											<div class="form-group">
												<label for="teacherPhone" class="control-label">老师电话：</label> 
												<input type="text" class="form-control" id="teacherPhone" name="teacherPhone">
											</div>
											<div class="form-group">
												<label for="status" class="control-label">状态：</label>												
												<select class="form-control" id="status" name="status">
													<option value="0">无安排课程</option>
													<option value="1">有安排课程</option>
												</select>
											</div>
										</form>
									</div>
									<div class="modal-footer">
										<button type="submit" id="btnSubmit" onclick="edit()" class="btn btn-primary">保存</button>
										<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
									</div>
								</div>
							</div>
						</div>
						<!-- 编辑模态框结束 -->
					</div>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="${ctx}/static/bootstrap/js/jquery.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/perfect-scrollbar.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/bootstrap-table/bootstrap-table.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

	<!--表单验证插件-->
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/jquery-validation-1.19.3/jquery.validate.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/jquery-validation-1.19.3/jquery.validate.extend.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/jquery-validation-1.19.3/additional-methods.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/jquery-validation-1.19.3/messages_zh.js"></script>
	<!--行内编辑插件-->
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js"></script>
	<!--对话框-->
	<script src="${ctx}/static/bootstrap/js/jconfirm/jquery-confirm.min.js"></script>	
	<!--消息提示-->
	<script src="${ctx}/static/bootstrap/js/bootstrap-notify.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/lightyear.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/main.min.js"></script>
	
	<script type="text/javascript">
		
	//获取上下文路径
		function getContextPath(){
		    var pathName = document.location.pathname;
		    var index = pathName.substr(1).indexOf("/");
		    var result = pathName.substr(0,index+1);
		    return result;
		}
		var ctx = getContextPath();
		
		var deleteUrl = "${ctx}/teacher/delete/";
		var addUrl="${ctx}/teacher/add/";
		var editUrl="${ctx}/teacher/edit/";
		var listUrl="${ctx}/teacher/list/";
		
		//数据验证：服务端验证（JSR303，Hibernate validator ）+和客户端验证（jquery.validate.js）		
		$(function() {
			var options = {
				//不允许输入空格
				onkeyup : function(element, event) {
					var value = $.trim(this.elementValue(element));
					$(element).val(value);
				},
				rules : {//定义验证的规则
					teacherName : {
						required : true
					},
					teacherPhone : {
						required : true,
						minlength : 11
					}
				},
				messages : {//定义规则对应的提示信息
					teacherName : {
						required : "老师名称不能为空"
					},
					teacherPhone : {
						required : "老师电话不能为空",
						minlength : "号码不能小于11位"
					}
				}
			};
			var validate1 = $("#form-teacher-add").validate(options);
			var validate2 = $("#form-teacher-edit").validate(options);

		})
		
		//查询
		$("#btnQuery").click(function(){
			$("#myTable").bootstrapTable('refresh');
		})
		
		//重置
		$("#btnReset").click(function(){
			$("#form-teacher-query")[0].reset();
			$("#myTable").bootstrapTable('refresh');
		})
		
		//新增
		function add() {
			if ($("#form-teacher-add").valid()) {
				$.post(addUrl, $("#form-teacher-add")
						.serialize(), function(data, status) {
					//通知消息
					if (data.code == 0) {
						//关闭模态框
						$("#addModal").modal('hide');
						//清空表单
						$("#form-teacher-add")[0].reset();
						//添加显示新增的数据
						//$("#myTable").bootstrapTable('refreshOptions',{pageNumber:1});	
						$("#myTable").bootstrapTable('prepend', data.obj);
						lightyear.notify(data.msg, 'success', 1000,
								'mdi mdi-emoticon-happy', 'top', 'right');
					} else {
						lightyear.notify(data.msg, 'danger', 1000,
								'mdi mdi-emoticon-sad', 'top', 'right');
					}
				});
			}
		}

		//打开modal，获取数据
		function get(id, index) {
			//获取数据，方式：获取页面上的数据
			var rowData = $("#myTable").bootstrapTable('getRowByUniqueId', id);
			//将数据填充到编辑表单
			$("#editModal").find("#index").val(index);
			$("#editModal").find("#id").val(rowData.id);
			$("#editModal").find("#teacherName").val(rowData.teacherName);
			$("#editModal").find("#teacherPhone").val(rowData.teacherPhone);
			//显示Model（表单）
			$("#editModal").modal('show');
		}
		// 操作方法 - 编辑

		function edit(id) 
		{
			if ($("#form-teacher-edit").valid()) {
				var index = $("#editModal").find("#index").val();
				$.post(editUrl, $("#form-teacher-edit")
						.serialize(), function(data, status) {
					//通知消息
					if (data.code == 0) {
						var row = data.obj;
						//关闭模态框
						$("#editModal").modal('hide');
						//清空表单
						$("#form-teacher-edit")[0].reset();
						//添加显示修改后的数据
						$("#myTable").bootstrapTable('updateRow', {index : index,row : row});
						lightyear.notify(data.msg, 'success', 1000,'mdi mdi-emoticon-happy', 'top', 'right');
					} else {
						lightyear.notify(data.msg, 'danger', 1000,'mdi mdi-emoticon-sad', 'top', 'right');
					}
				});
			}
		}
		
		//单选删除
		function deleteById(id){
			var idsArr = new Array();
			idsArr[0] = id;
			deleteByIdsArr(idsArr);
		}
		
		//多选删除
		function deleteByIds(){
			//获取bootstraptable中被选择的行
			var getSelectRows = $('#myTable').bootstrapTable('getSelections'); //结果是数组
			if(getSelectRows.length == 0){
				alert("请至少选择一条记录！");
				return;
			}
			//将选中的记录Id组成数组形式
			var idsArr = new Array();
			for(var i=0;i<getSelectRows.length;i++){
				idsArr[i] = getSelectRows[i].id;
			}
			deleteByIdsArr(idsArr);
		}
		
		//根据id数组删除指定记录
		function deleteByIdsArr(idsArr) {
			var ids = idsArr.join(",");//1,2,3,4,5
			$.alert({
				title : '删除确认',
				content : '确定要删除吗？',
				buttons : {
					confirm : {
						text : '确认',
						btnClass : 'btn-primary',
						action : function() {
							$.get(deleteUrl + ids, function(result) {
								if (result.code == 0) {
									//刷新表格
									$('#myTable').bootstrapTable('remove',{field:'id', values:idsArr});
									var list = $("#myTable").bootstrapTable('getData');
									if(list.length == 0){
										$("#myTable").bootstrapTable('refreshOptions',{pageNumber:1});
									}
									//通知消息	
									lightyear.notify(result.msg, 'success',1000, 'mdi mdi-emoticon-happy','top', 'right');
								} else {
									lightyear.notify(result.msg, 'danger',1000, 'mdi mdi-emoticon-sad','top', 'right');
								}
							});
						}
					},
					cancel : {
						text : '取消',
						action : function() {
						}
					}
				}
			});
		}

		$("#myTable").bootstrapTable({
			classes : 'table table-bordered table-hover table-striped', //指定表格样式
			url : listUrl, //获取远程(后台)数据的url
			method : 'get', //请求方式 get,post
			dataType : 'json', //数据形式：json，若是跨域，则使用jsonp，因为本示例中是跨域的调用,所以涉及到ajax都采用jsonp,
			uniqueId : 'id',
			idField : 'id', // 每行的唯一标识字段 
			toolbar : '#toolbar', //指定工具栏
			//clickToSelect: true,     // 是否启用点击选中行
			showColumns : true, //是否显示所有列
			showToggle : true, //是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)		  
			showRefresh : true, //是否显示刷新按钮
			search : true, //是否启用搜索，客户端搜索
			pagination : true, //是否启用分页
			sortOrder : 'asc', //排序方式：asc-升序，desc-降序，按照idField
			queryParams : function(params) { //定义分页查询数据
				var temp = {
					pageSize : params.limit, // 每页数据量
					offset : params.offset, // sql语句起始索引
					pageNumber : (params.offset / params.limit) + 1,
					sort : params.sort, // 排序的列名
					sortOrder : params.order,
					id:$("#form-teacher-query").find("#id").val(),
					teacherName:$("#form-teacher-query").find("#teacherName").val(),
					status:$("#form-teacher-query").find("#status").val()
				};
				return temp;
			},
			sidePagination : 'server', // 分页方式：client客户端分页，server服务端分页
			pageNumber : 1, // 初始化加载第一页，默认第一页
			pageSize : 10, // 每页的记录行数
			pageList : [ 10, 25, 50, 100 ], // 可供选择的每页的行数
			//showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
			//exportDataType: "basic", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据	
			columns : [ {
				checkbox : true
			//是否显示复选框
			}, {
				field : 'id',
				title : '教师编号',
				//visible: false,  //隐藏
				sortable : true
			//是否排序			
			}, {
				field : 'teacherName',
				title : '教师姓名'
			}, {
				field : 'teacherSex',
				title : '教师性别'
			}, {
				field : 'teacherPhone',
				title : '教师电话'
			}, 
			{
				field: 'status',
				title: '状态',
				formatter: function(value, row, index){
					var you = "<span class='label label-success'>有安排课程</span>";
					var xian = "<span class='label label-danger'>无安排课程</span>";
					return value==0?xian:you;
				}
			},{
				field : 'operate',
				title : '操作',
				formatter : btnGroup, //btnGroup是一个函数的名字，该函数定义当前列如何显示
				events : {//事件
					'click .edit-btn' : function(event, value, row, index) {
						get(row.id, index);
					},
					'click .del-btn' : function(event, value, row, index) {
						deleteById(row.id, index);
					},
					'click .show-btn' : function(event, value, row, index) {
						show(row.id);
					}
				}
			} ]
		});

		// 操作按钮
		function btnGroup() {
			var html = '<a href="#!" class="btn btn-xs btn-warning m-r-5 edit-btn" title="编辑" data-toggle="tooltip">编辑</a>'
					+ '<a href="#!" class="btn btn-xs btn-info show-btn" title="查看" data-toggle="tooltip">查看</a>'
					+ '<a href="#!" class="btn btn-xs btn-danger del-btn" title="删除" data-toggle="tooltip">删除</a>';
			return html;
		}
		function show(row) {
			alert('查看详细 row = ' + row);
		} 

		
	</script>
</body>
</html>